<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 查询表单 -->
      <a-col :span="24">
        <a-card>
          <pro-query
            :searchParam="searchParam"
            @on-search="search"
          ></pro-query>
        </a-card>
      </a-col>
      <!-- 岗位列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </page-layout>
</template>

<script>
import save from './announcementModal/save';
import edit from './announcementModal/edit';
import {message, modal} from 'ant-design-vue';
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {
  ebcRemove,
  ebcRemoveBatch,
  getAnnouncementList,
} from "@/api/module/experiment";
import {reactive, createVNode, ref, toRaw} from 'vue';

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    save,
    edit,
  },
  setup() {

    const tableRef = ref();

    /// 列配置
    const columns = [
      {dataIndex: "ebTitle", key: "ebTitle", title: "公告标题"},
      {dataIndex: "ebCreatetime", key: "ebCreatetime", title: "发布时间"},
      {dataIndex: "ebCreateUserName", key: "ebCreateUserName", title: "发布人"},
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await getAnnouncementList(param);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '是否删除该公告?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({content: "提交中...", key: removeKey});
          ebcRemove({"id": record.id}).then((response) => {
            if (response.success) {
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(() =>
                tableRef.value.reload()
              )
            } else {
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    const removeBatchMethod = (ids) => {
      modal.confirm({
        title: '是否删除选中公告?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({content: "提交中...", key: removeBatchKey});
          ebcRemoveBatch({"ids": ids}).then((response) => {
            if (response.success) {
              message.success({content: "删除成功", key: removeBatchKey, duration: 1}).then(() =>
                tableRef.value.reload()
              )
            } else {
              message.error({content: "删除失败", key: removeBatchKey, duration: 1})
            }
          })
        }
      });
    }

    /// 工具栏
    const toolbar = [
      {
        label: "新增", event: function () {
          state.visibleSave = true
        }
      },
      {
        label: "删除", event: function () {
          removeBatchMethod(state.selectedRowKeys)
        }
      },
    ];

    /// 行操作
    const operate = [
      {
        label: "编辑", event: async function (record) {
          console.log("点击编辑+", toRaw(record))
          state.visibleEdit = true, state.recordEdit = record
        }
      },
      {
        label: "删除", event: function (record) {
          removeMethod(record)
        }
      },
    ];

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      visibleReply: false,
      recordEdit: {},
      recordInfo: {},
    })

    const searchParam = [
      {key: "emName", type: "input", label: "实验名称"},
    ]

    const search = function (value) {
      state.param = value
    }

    const closeSave = function () {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function () {
      state.visibleEdit = false
      tableRef.value.reload()
    }

    const closeInfo = function () {
      state.visibleInfo = false
    }
    const closeReply = function () {
      state.visibleReply = false
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    return {
      state, // 状态共享
      fetch, // 数据回调
      toolbar, // 工具栏
      columns, // 列配置
      operate, // 行操作
      pagination, // 分页配置

      search,
      searchParam, // 查询参数

      closeSave,
      closeEdit,
      closeInfo,
      closeReply,

      onSelectChange,
      tableRef
    };
  },
};
</script>
